// index.js

const CDN_PATH = 'https://3gimg.qq.com/lightmap/xcx/demoCenter/images';
Component({
  data: {
    CDN_PATH,
    searchText: '',
    bShowLayerPanel: false,
    layerInfos: [
      {
        id: 1,
        name: '电子地图',
        url: '/static/images/vec-layer-icon.png',
      },
      {
        id: 2,
        name: '影像地图',
        url: '/static/images/img-layer-icon.png',
      },
      {
        id: 3,
        name: '3D城市',
        url: '/static/images/3D-layer-icon.png',
      },
      {
        id: 4,
        name: '实时路况',
        url: '/static/images/road-layer-icon.png',
      },
    ],
    drawTypes: [
      {
        type: 'point',
        name: '绘点',
        icon: '/static/images/point-icon.png',
        activeIcon: '/static/images/active-point-icon.png',
      },
      {
        type: 'line',
        name: '绘线',
        icon: '/static/images/line-icon.png',
        activeIcon: '/static/images/active-line-icon.png',
      },
      {
        type: 'polygon',
        name: '绘面',
        icon: '/static/images/polygon-icon.png',
        activeIcon: '/static/images/active-polygon-icon.png',
      }
    ],
    endDraw:{
      name: '结束绘制',
      icon: '/static/images/end-icon.png',
      activeIcon: '/static/images/end-icon.png',
    },
    activeDrawType: '',
    activeLayer: 1,
    location: {
      latitude: 30,
			longitude: 103
    },
    markers: [],
    polyline: [],
    polygons: [],
    activeGraphic: null,
    bShowDrawInfoPanel: false,
    bFrist: true,
    graphicInfo: {
      name:''
    },
    maxId: 0
    
    
  },
  attached: function () {
    this.getCurrentPos()
   },

  methods: {
    showLayerPanel() {
      this.setData({
        bShowLayerPanel: true
      })
    },
    hideLayerPanel() {
      this.setData({
        bShowLayerPanel: false
      })
    },
    switchLayer(e) {
      this.setData({
        activeLayer: e.currentTarget.dataset.id
      })
    },
    hideDrawInfoPanel() {
      this.setData({
        bShowDrawInfoPanel: false
      })
    },
    switchDrawType(e) {
      const type = e.currentTarget.dataset.type
      if (type === this.data.activeDrawType) return
      this.setData({
        activeDrawType: type,
        bFrist: true
      })
    },
    handleDrawEnd() {
      this.setData({
        bShowDrawInfoPanel: true
      })
    },
    getCurrentPos() {
      wx.getLocation({
				type: 'gcj02',
				success: (res) => {
          const {latitude, longitude} = res;
					this.setData({
						location: {
							latitude,
							longitude
						}
					});
				}
			});
    },
    onTapMap(event) {
      const latitude = event.detail.latitude;
      const longitude = event.detail.longitude;
      if (this.data.activeDrawType === 'point') {
        const marker = {
          id: this.data.maxId,
          iconPath: `/static/images/active-point-icon.png`,
          latitude: latitude,
          longitude: longitude,
          width: 30,
          height: 30
        }
        if(this.data.bFrist) {
          this.setData({
            markers: [...this.data.markers,marker],
            activeGraphic: marker,
            bFrist:false
          })
        } else {
          const markers = this.data.markers.slice(0, this.data.markers.length - 1).concat(marker);
          this.setData({
            markers: markers,
            activeGraphic: marker
          })
        }
      }
      if (this.data.activeDrawType === 'line') {
        if(this.data.bFrist) {
          const polyline = {
            points:[{
              latitude,
              longitude
            },
            {
              latitude,
              longitude
            }
          ],
            width: 2,
            dottedLine: true
          }
          this.setData({
            polyline: [...this.data.polyline,polyline],
            activeGraphic: polyline,
            bFrist:false
          })
        } else {
          let currentLine = this.data.polyline[this.data.polyline.length - 1]
          currentLine.points.push({
            latitude,
            longitude
          })
          const polyline = this.data.polyline.slice(0, this.data.polyline.length - 1).concat(currentLine);
          this.setData({
            polyline: polyline,
            activeGraphic: currentLine
          })
        }
      }
      if(this.data.activeDrawType === 'polygon'){
        if(this.data.bFrist) {
          const polygon = {
            points:[{
              latitude,
              longitude
            },
            {
              latitude,
              longitude
            },
            {
              latitude,
              longitude 
            },
          ],
            strokeWidth: 2,
            fillColor:"#ffff00"
          }
          this.setData({
            polygons: [...this.data.polygons,polygon],
            activeGraphic: polygon,
            bFrist:false
          })
          console.log(this.data.polygons)
          
        } else {
          let currentPolygon = this.data.polygons[this.data.polygons.length - 1]
          currentPolygon.points.push({
            latitude,
            longitude
          })
          const polygons = this.data.polygons.slice(0, this.data.polygons.length - 1).concat(currentPolygon);
          this.setData({
            polygons: polygons,
            activeGraphic: currentPolygon
          })
        }
      }
    },
    onSearch() {
      console.log('搜索' + this.data.searchText);
    },
    onChange(event) {
      console.log(event.detail);
      this.setData({
        graphicInfo:{
          name: event.detail
        }
      })
    },
    cancel() {
      const markers = this.data.markers.slice(0, this.data.markers.length - 1)
      this.setData({
        markers: markers,
        activeDrawType: '',
        activeGraphic: null,
        bShowDrawInfoPanel: false

      })
    },
    save() {
      if (this.data.activeDrawType === 'point') {
        const marker = this.data.markers[this.data.markers.length - 1]
        marker.callout = {
          content: this.data.graphicInfo.name,
          display: 'ALWAYS',
          padding: 8,
        }
        const markers = this.data.markers.slice(0, this.data.markers.length - 1).concat(marker);
        this.setData({
          markers:markers,
          activeDrawType: '',
          activeGraphic: null,
          maxId: this.data.maxId + 1,
          bShowDrawInfoPanel: false
        })
      }
      if (this.data.activeDrawType === 'line') {
        const currentLine = this.data.activeGraphic
        currentLine.points.shift()
        currentLine.dottedLine = false
        const polyline = this.data.polyline.slice(0, this.data.polyline.length - 1).concat(currentLine);
        this.setData({
          polyline: polyline,
          activeGraphic: null,
          activeDrawType: '',
          bShowDrawInfoPanel: false
        })
      }
      if (this.data.activeDrawType === 'polygon') {
        const currentPolygon = this.data.activeGraphic
        currentPolygon.points.shift()
        currentPolygon.points.shift()
        const polygons = this.data.polygons.slice(0, this.data.polygons.length - 1).concat(currentPolygon);
        this.setData({
          polygons: polygons,
          activeGraphic: null,
          activeDrawType: '',
          bShowDrawInfoPanel: false
        })
      }
    }
  },
})
